<template>
	<view class="container-box">
		
		<view class="container-fixed" :style="'background:'+ (classifyCurrent>0?'#EE1B14':(scrollTop>30?'#EE1B14;':bannerColor) +';')">
			<view class="container-search">
				<u-image  class="right-button" style="width:30px;height:30px;margin-right: 10px;" width="70rpx" mode="scaleToFill" :src="signSrc" @click="toSign"></u-image>
				<u-search class="left-search" placeholder="输入商品名或粘贴宝贝标题搜索" :show-action="showAction" :disabled="disabledSearch" @click="searchChange"></u-search>
				<u-image  class="right-button" style="width:30px;height:30px;margin-left: 10px;" width="70rpx" mode="scaleToFill" :src="msgSrc" @click="toMsg"></u-image>
			</view>
			<view class="container-tabbar">
				<!-- 一级分类 -->
				<scroll-view class="classifyScroll" scroll-x scroll-with-animation @scroll="classifyRowScroll" :scroll-into-view="intoViewId" :scroll-left="scrollLeftHorizontal">
					<block v-for="(classify,index) in classifys" :key='index'>
						<view class="classify-container">
							<view class="classify-items" @click="classifyChange(index)" :id="classifyCurrent==index?'classify-items-active':''" :class="classifyCurrent==index?'classify-items-active':''">
								<view class="classifyname">
									{{classify.classifyName}}
								</view>
								<view class="bottom-border"></view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view class="container-body">
			<swiper class="pageSwiper" :disable-touch='disableTouch' duration="200" :current='classifyCurrent' @change='switchClassifyPage' @transition='swiperTransition' @animationfinish='swiperAnimationfinish'>
				<swiper-item v-for="(category,index) in classifys" :key='index' :current-item-id='category.parentId'>
					<view v-if='index==0'>
						<homePage ref='indexPage' :canrefush='canrefush' :fixedClass='fixedClass' @scrolltoTop='scrolltoTop' @scrolltoview='scrolltoview'
						 @pushfixed='getfixed' @scrollNum='getScroll' :topheight='topheight' @passColor='getColor'></homePage>
					</view>
					<view v-else>
						<classifyPage v-if="index==classifyCurrent+1 || index==classifyCurrent || index==classifyCurrent" :parentId='category.classifyCid'
						 :topheight='topheight' :canrefush='canrefush' :canload='index==classifyCurrent'>
						</classifyPage>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<easy-hover iconUrl="/static/img/index/xinrenhongbao.png" :circle="false" :height="120"
	         :initMarginTop="800" :width="120" @taped="xinrenhongbao" :stickSide="true" initSide="right"></easy-hover>
	</view>
</template>

<script>
	import homePage from '../../components/homePage.vue';
	import classifyPage from '../../components/classifyPage.vue';
	import easyHover from '../../components/easy-hover/easy-hover.vue'
	export default {
		components: {
			homePage,
			classifyPage,
			easyHover
		},
		data() {
			return {
				bannerColor: '',
				title: 'Hello',
				showAction:false,
				disabledSearch:true,
				isSwiper:true,
				current:"1",
				swiperCurrent:"1",
				list:[],
				msgSrc:"/static/img/index/msg.png",
				signSrc:"/static/img/index/sign.png",
				classifys:[],
				canswiper:false,
				//当前分类ID
				classifyCurrent: 0,
				canrefush:true,
				fixedClass: false,
				topheight: 0,
				itemLeft:0,
				//要滚动到指定元素的id
				intoViewId:'',
				//设置横向滚动条位置
				scrollLeftHorizontal:0,
				//是否禁止用户 touch 操作
				disableTouch:false,
				scrollTop: 0,
			}
		},
		onLoad() {
			this.getClassifys();
		},
		//页面滚动到底部的事件
		onReachBottom() {
			console.info('页面滚动到底部的事件')
		},
		onShow() {
			if(this.classifys){
				this.getClassifys();
			}
		},
		onReady() {
			this.getTopheight()
		},
		methods: {
			//搜索框点击事件
			searchChange() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			//签到
			toSign(){
				uni.navigateTo({
					url: '/pages/my/common/signIn'
				});
			},
			toMsg(){
				uni.navigateTo({
					url: '/pages/msg/msg'
				});
			},
			//分类行滚动
			classifyRowScroll(e){
				console.log(e);
				this.rowLeft = e.scrollLeft
			},
			//分类点击事件
			classifyChange(id){
				this.classifyCurrent = id
			},
			getClassifys() {
				this.$u.api.childClassify({
					classifyType: 0,
					parentId: 0
				}).then((res) => {
					if (res.code != 200){
						this.$u.toast(res.msg);
					}
					var home = {}
					home.classifyName = '热门';
					home.classifyId = 0;
					home.classifyType = 0;
					this.classifys = res.data;
					this.classifys.unshift(home);
				})
			},
			getTopheight() {
				// 获取顶部高度
				uni.createSelectorQuery().in(this).select('.container-fixed').boundingClientRect(data => {
					this.topheight = data.height
				}).exec();
			},
			//滚动到当前选中的分类
			swiperCroll(){
				this.intoViewId = ''
				this.scrollLeftHorizontal = this.itemLeft
				this.$nextTick(()=>{
					this.intoViewId = 'classify-items-active'
				})
			},
			//切换分类
			switchClassifyPage(e){
				this.bannerColor = '#EE1B14'
				this.classifyCurrent = e.detail.current
				this.swiperCroll()
			},
			//swiper-item 的位置发生改变时会触发 transition 事件
			swiperTransition(){
				this.canrefush = false
			},
			//动画结束时会触发 animationfinish 事件
			swiperAnimationfinish(){
				this.canrefush = true
			},
			scrolltoTop() {
				this.scrollindex = 0
			},
			scrolltoview() {
				this.scrollindex = this.scrollTop
				this.$nextTick(() => {
					this.scrollindex = this.fixedHeight - (this.topheight)
				});
			},
			getfixed(e) {
				this.fixedHeight = e
			},
			getScroll(e) {
				this.scrollTop = e
			},
			// 页面样式处理
			getColor(color) {
				this.bannerColor = color;
			},
			//新人红包
			xinrenhongbao(){
				uni.showModal({
				    title: '提示',
					showCancel:false,
				    content: '添加客服即可免费领取新人福利哦~',
				    success: function (res) {

				    }
				});
			}
		}
	}
</script>
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
	.container-box{
		.container-fixed{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 600;
			.container-search{
				padding: 10rpx;
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items:center;
				justify-content:center;
			}
			.container-tabbar{
				padding: 0 20rpx;
				.classifyScroll{
					height: 60rpx;
					white-space: nowrap;
					display: flex;
					.classify-container{
						display: inline-block;
						.classify-items {
							margin-right: 30rpx;
							.classifyname {
								font-size: 28rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
							.bottom-border {
								display: none;
								background-color: #FFFFFF;
								width: 65rpx;
								height: 4rpx;
								border-radius: 1rpx;
								margin-top: 5rpx;
							}
						}
						.classify-items-active {
							.classifyname {
								font-size: 32rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
						
							.bottom-border {
								display: block;
							}
						}
					}
				}
			}
		}

	    
		.container-body{
			width: 100%;
			
			.pageSwiper {
				width: 100%;
				overflow: hidden;
				height: 100vh;
			
				.swiper-scroll {
					width: 100%;
					overflow: hidden;
					height: 100vh;
				}
			}
		}
	}
</style>
